<template>
  <div class="item">
    <movie-item v-for="item of movie" :item="item" :key="item._id" @click.native="toMoreDetail(item._id)"></movie-item>
  </div>
</template>

<script>
import MovieItem from "./component/MovieItem.vue";
export default {
  data() {
    return {
      movie: [],
    };
  },
  components: {
    MovieItem,
  },
  mounted() {
    var { title } = this.$route.query;
    if (title === "正在热映") {
      this.$http("http://122.112.161.135:4000/api/movie/inTheaters").then(
        (res) => {
          res.data.res.forEach((item) => {
            var { raiting } = item;
            item.star = this.handleStar(raiting);
            item.rating = raiting;
          });
          this.movie = res.data.res
        }
      );
    } else if (title === "即将上映") {
      this.$http("http://122.112.161.135:4000/api/movie/comingSoon").then(
        (res) => {
          res.data.res.forEach((item) => {
            var { rating } = item;
            item.star = this.handleStar(rating);
          });
          this.movie = res.data.res
        }
      );
    } else if (title === "top250") {
      this.$http("http://122.112.161.135:4000/api/movie/top250").then((res) => {
        res.data.res.forEach((item) => {
          var { rating } = item;
          item.star = this.handleStar(rating);
        });
        this.movie = res.data.res
      });
    }
  },
  methods: {
    handleStar(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num > 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num).toFixed(2));
        } else {
          arr.push(0);
        }
        num -= 2;
      }
      return arr;
    },
    toMoreDetail(val){
    this.$router.push(`./moreDetail/${val}`)
  }
  },
  
};
</script>

<style>
</style>